<template>
  <div class="swiper">
    <swiper :options="swiperOption">
      <swiper-slide v-for="(v,i) in List" :key="i">
        <div>
          <ul class="nav-icon">
            <li v-for="(vto,ito) in v" :key="ito">
              <img :src="vto.imgUrl">
              <p>{{vto.desc}}</p>
            </li>
          </ul>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
export default {
  name: "NavIcon",
  data() {
    return {
      swiperOption: {}
    };
  },
  mounted() {},
  props: ["iconList"],
  computed: {
    List() {
      let arr = [];
      let arrto = [];
      for (let i in this.iconList) {
        if (i < 8) {
          arr.push(this.iconList[i]);
        } else {
          if (i == 8) {
            arrto.push(arr);
            arr = [];
            arr.push(this.iconList[i]);
            console.log(arr);
          } else {
            arr.push(this.iconList[i]);
          }
        }
      }
      arrto.push(arr);
      return arrto;
    }
  }
};
</script>

<style scoped>
.swiper {
  width: 100%;
}
img {
  width: 1.2rem;
  height: 1.2rem;
}
.nav-icon {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.nav-icon li {
  width: 25%;
  text-align: center;
  margin-top: 0.2rem;
}
.nav-icon li img {
  margin-bottom: 0.2rem;
}
</style>